<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            placeholder="请输入需要搜索的安置点名称"
            v-model="queryInfo.query"
            class="input-with-select"
            clearable
            @clear="getAnZhiDian"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchAnzhidian"></el-button>
          </el-input>
        </el-col>
        <el-col :span="10">
          <el-cascader
            v-model="selectIndexArr"
            :options="cityData"
            :props="propsData"
            @change="handleChange"
          ></el-cascader>
        </el-col>
      </el-row>
      <!-- tab表格默认启动后加载所有的数据 -->
      <el-table :data="anzhidianData" style="width: 100%" border stripe>
        <el-table-column type="expand">
          <!-- 里面放置一个cesium然后将对应的数据直接进行投影过来 -->
          <template slot-scope="scope">
            <cesiumviewer :cesiumData="scope.row"></cesiumviewer>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="city" label="省份" align="center"></el-table-column>
        <el-table-column prop="shiqu" label="市区" align="center"></el-table-column>
        <el-table-column prop="area" label="县城" align="center"></el-table-column>
        <el-table-column prop="anzhidian" label="安置点" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="getMoreUserInfo(scope.row)" type="primary" size="mini">加载详情</el-button>
            <!-- <el-button type="warning" size="mini" @click="addMoreUser(scope.row)">添加更多用户</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import cesiumViewer from './CesiumView';
export default {
  data() {
    return {
      queryInfo: {
        query: ''
      },
      cityData: [],
      anzhidianData: [],
      propsData: {
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'code',
        label: 'name',
        children: 'city'
      },
      selectIndexArr: []
    };
  },
  components: {
    cesiumviewer: cesiumViewer
  },
  methods: {
    // 三级联动
    async handleChange(value) {
      console.log(value);
      if (value.length == 1 && value[0] == 420000) {
        this.getAnZhiDian();
      } else if (value.length == 2 && value[1] == 422800) {
        this.getAnZhiDian();
      } else if (
        (value.length == 3 && value[2] == 422801) ||
        value[2] == 422825
      ) {
        // console.log(11);
        let res = await this.axios.get('/data/anzhidian_Data.json');
        if (res.request.status !== 200) {
          this.$message.error('数据请求出错');
        } else {
          if (value[2] == 422801) {
            var arr = [];
            arr.push(res.data[0]);
            this.anzhidianData = arr;
          } else if (value[2] == 422825) {
            var arr = [];
            arr.push(res.data[1]);
            this.anzhidianData = arr;
          }
        }
      } else {
        this.$message.error('没检索到对应的信息');
        this.selectIndexArr = [];
      }
    },
    addMoreUser(value) {
      // console.log(value);
      window.sessionStorage.setItem('adduser', JSON.stringify(value));
      this.$router.push('/adduserinfo');
    },
    searchAnzhidian() {
      // console.log(this.anzhidianData,'安置点信息');
      // console.log(this.queryInfo.query);
      if (this.queryInfo.query == '') {
        this.getAnZhiDian();
      }
      var newArr = this.anzhidianData.filter(item => {
        return item.anzhidian.indexOf(this.queryInfo.query) != -1;
      });
      // console.log(newArr);
      if (newArr.length > 0) {
        this.anzhidianData = newArr;
      } else {
        this.$message.error('没检索到对应信息！');
      }
    },
    async getCityData() {
      // console.log(11);

      let res = await this.axios.get('/data/city_code.json');
      if (res.request.status !== 200) {
        this.$message.error('数据请求出错');
      } else {
        this.cityData = res.data;
        // console.log(this.cityData);
      }
    },
    async getAnZhiDian() {
      let res = await this.axios.get('/data/anzhidian_Data.json');
      // console.log(res);
      if (res.request.status !== 200) {
        this.$message.error('数据请求出错');
      } else {
        this.anzhidianData = res.data;
        this.selectIndexArr = [];
        this.$message.success('数据已经加载成功！');
        // console.log(this.anzhidianData);
      }
    },
    // getMore(value) {
    //   // console.log(value);
    // },
    getMoreUserInfo(value) {
      this.$router.push('/anzhidian');
      // console.log(value);
      window.localStorage.setItem('info', JSON.stringify(value));

      // 实际生产环境中这个地方需要将value对一个的用户选择的城市的id传递到下一个页面或者是保存到localstorage中
    }
  },
  mounted() {
    this.getCityData();
    this.getAnZhiDian();
  }
};
</script>
<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}
</style>